// @ts-nocheck
import {defineComponent, PropType} from "vue";
import "@/styles/treeNode.css"
import account from "@/assets/home/account.png"
import _group from "@/assets/home/group.png"
import _camera from "@/assets/home/camera.png"
import {computeTreeIcon} from "@/utils/gps/iconTransform";
import {Camera, Device, Group, Company, Geofence} from "@/interface/home";
import {computeSubTitle} from "@/utils/gps/format";
import { ElCheckbox } from "element-plus";
import constant from "@/utils/constant"

export default defineComponent({
    name: "TreeNode",
    props: {
        data: {
            type: Object as PropType<Device | Group | Company | Camera | Geofence>,
            required: true
        }
    },
    emits: ["checkboxEvents"],
    setup(prop, { emit}){
        function equipmentChanges(val){
            emit("checkboxEvents", prop.data, val)
        }

        function checkEvent(event){
            event.stopPropagation()
        }

        function company(data: Company) {
            return <div class="custom-tree-node" data-types={ data.nodeType }>
                <img src={account} alt="账户" class="tree-icon"></img>
                <span>{ data.name }({data.totalDeviceOnlineNum}/{ data.totalDeviceNum })</span>
            </div>
        }

        function group(data: Group) {
            return <div class="custom-tree-node" data-types={ data.nodeType }>
                <img src={_group} alt="分组" class="tree-icon"></img>
                <span>{data.name}</span>
            </div>
        }

        function device(data: Device) {
            return <div class="custom-tree-node" data-imei={data.imei} data-types={data.nodeType}>
                <ElCheckbox value={data.nodeId} onChange={equipmentChanges} onClick={checkEvent}></ElCheckbox>
                <img src={computeTreeIcon(data)} alt="设备" class="tree-icon"></img>
                <span>{data.plateNo}</span>
                <span class="describe">{computeSubTitle(data)}</span>
            </div>
        }

        function camera(data: Camera){
            return <div class="custom-tree-node" data-types={data.nodeType}>
                <ElCheckbox value={data.nodeId} onChange={equipmentChanges} onClick={checkEvent}></ElCheckbox>
                <img src={_camera} alt="摄像头" class="tree-icon"></img>
                <span>{data.plateNo}</span>
            </div>
        }

        function geofence(data: Geofence){
            return <div class="custom-tree-node" data-imei={data.id} data-types={data.nodeType}>
                <ElCheckbox value={data.nodeId} onChange={equipmentChanges} onClick={checkEvent}></ElCheckbox>
                <img src={constant.enclosureIconUrl + data.icon + ".png"} alt="围栏" class="tree-icon"></img>
                <span>{data.name}</span>
            </div>
        }


        function renderNode() {
            switch (prop.data.nodeType) {
                case "company":
                    return company(prop.data)
                case "group":
                    return group(prop.data)
                case "device":
                    return device(prop.data)
                case "camera":
                    return camera(prop.data)
                case "geofence":
                    return geofence(prop.data)
            }
        }

        return () => renderNode()
    }
})